<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>维修详情</title>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/order/orderDetail.css" rel="stylesheet"/>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/vue-common.js"></script>
    <script src="../../js/common.js"></script>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>维修详情</span>
        <div class="icon"><img src="../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container">

        <div class="card-box order-info">
            <div class="order-title">故障信息</div>
            <div>
                <span class="label-weight">报修类型:</span>
                <span class="label-light">{{orderDetail.atmErrorStatusName}}</span>
            </div>

            <div>
                <span class="label-weight">故障模块:</span>
                <span class="label-light">{{orderDetail.engineerUnTypeName}}</span>
            </div>

            <div>
                <span class="label-weight">故障描述:</span>
                <span class="label-light">{{orderDetail.startUnDesc}}</span>
            </div>

            <div>
                <span class="label-weight">建单人:</span>
                <span class="label-light">{{orderDetail.createUserName}}</span>
            </div>

            <div>
                <span class="label-weight">建单人电话:</span>
                <span class="label-light">{{orderDetail.createUserPhone}}</span>
            </div>
            <div>
                <span class="label-weight">维修反馈:</span>
                <span class="label-light">{{orderDetail.fixDescribe}}</span>
            </div>

        </div>

        <div class="card-box">
            <div class="order-title">维修照片</div>
            <div class="img-list">
                <div class="img-item" v-for="item in orderDetail.lsAtmUnImgs"   v-if="item.imgType != 0" >
                    <img @click="showImg(imgServer+item.imgFile)" :src="imgServer+item.imgFile" >
                </div>
            </div>
        </div>

        <div v-if="imgShow" class="img-show-box">
            <div @click="closeImgShow" :class="{'img-show-box-shade':imgShow}"></div>
            <img @click="closeImgShow" :src="imgShowUrl" alt="">
        </div>

        <div class="card-box">
            <div class="order-title">维修轨迹</div>
            <div class="order-trace">
                <div class="order-trace-item">
                    <img src="../../img/order/ic_message_sendorder.png" alt="">
                    <p>派单</p>
                    <p>{{orderDetail.beginDate |dataFormatShort}}</p>
                </div>
                <div class="order-trace-item">
                    <img src="../../img/order/ic_message_receiveorder.png" alt="">
                    <p>接单</p>
                    <p>{{orderDetail.receiveDate |dataFormatShort}}</p>
                </div>
                <div class="order-trace-item">
                    <img src="../../img/order/ic_message_startoff.png" alt="">
                    <p>出发</p>
                    <p>{{orderDetail.startDate |dataFormatShort}}</p>
                </div>
                <div class="order-trace-item">
                    <img src="../../img/order/ic_message_arrive.png" alt="">
                    <p>到达</p>
                    <p>{{orderDetail.arriveDate |dataFormatShort}}</p>
                </div>
                <div class="order-trace-item">
                    <img src="../../img/order/ic_message_repair.png" alt="">
                    <p>维修</p>
                    <p>{{orderDetail.repairDate |dataFormatShort}}</p>
                </div>
                <div v-if="orderDetail.orderStatus == 5" class="order-trace-item">
                    <img src="../../img/order/ic_message_finished.png" alt="">
                    <p>完成</p>
                    <p>{{orderDetail.endDate |dataFormatShort}}</p>
                </div>
                <div v-if="orderDetail.orderStatus != 5" class="order-trace-item">
                    <img src="../../img/order/ic_message_unfinished.png" alt="">
                    <p>未完成</p>
                    <p>{{orderDetail.endDate |dataFormatShort}}</p>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            imgShow: false,
            imgShowUrl: '../../img/common/btn_addpic@3x.png',
            imgServer: '',
            orderId: '',
            //订单详情
            orderDetail: {
                orderEngineerVos: []
            }

        },
        methods: {
            //获取订单维修详情
            getOrderDetail: function (orderId) {
                Resource.get(ORDER_DETAIL_FIX_API, {id: orderId}, function (res) {
                    vm.orderDetail = res;
                })

            },
            showImg: function (img) {
                this.imgShow = true;
                this.imgShowUrl = img
            },
            closeImgShow: function () {
                this.imgShow = false;
            }
        }
    });

</script>
<script>
    mui.plusReady(function () {
        var self = plus.webview.currentWebview();
        var orderId = self.orderId;
        if (orderId == '' || orderId == 'undefined') {
            return;
        }
        console.log('listen ----------orderId =' + orderId);
        vm.orderId = orderId;
        vm.imgServer = getImgServer();
        vm.orderDetail = {
            orderEngineerVos: []
        };
        vm.getOrderDetail(orderId);
    })
    mui.init({
        beforeback: function () {
            if(vm.imgShow){
                return vm.imgShow = false;
            }
            return true;
        }
    });
</script>
</body>
</html>